// 类组件
import React, { Component } from 'react'
// Route 定义路由规则所用
// Link/NavLink 声明式导航  NavLink它有激活样式  统一编译出来的html都为a标签
// Switch 它只会匹配成功一次，后续就不会继续匹配
import { Route, NavLink, Switch } from 'react-router-dom'

// 引入需要渲染的组件
import Home from './views/Home'
import About from './views/About'
import NotFound from './views/NotFound'

class App extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            {/* 它也有一个严格模式 */}
            <NavLink exact={true} to="/">
              home
            </NavLink>
          </li>
          <li>
            <NavLink to="/about">about</NavLink>
          </li>
        </ul>

        <hr />

        {/* 
          定义路由规则 默认情况下，react-route-dom它的path匹配是模糊匹配，而且会一直向下匹配下去，直到没有规则停止 
          严格匹配 exact={true}
        */}
        {/* <Route exact={true} path="/" component={Home} />
        <Route path="/about" component={About} /> */}

        {/* Switch使用后，要把范围较大的规则写在下面，精准的写在上面 */}
        {/* <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch> */}

        <Switch>
          <Route path="/about" component={About} />
          <Route exact={true} path="/" component={Home} />
          {/* 404页面处理，此时一定要把 / 弄成严格模式，否则不会到此规则匹配 */}
          <Route path="*" component={NotFound} />
        </Switch>
      </div>
    )
  }
}

export default App
